<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行 -->

    <div>
        防抖：<input id="input1" type="text"><br>
        防抖封装：<input id="input2" type="text">
    </div>

    <div>
        节流：<button id="btnJie">节流</button>
    </div>

    <script>
        //防抖
        const input1 = document.querySelector("#input1");
        let timeout = null; //它是不存在的
        input1.addEventListener("keyup", function () {
            if (timeout) { //如果存在时间，那么清空定时器,相当于if(timeout!==null)
                clearTimeout(timeout);
                console.log("清空定时器");
            }
            timeout = setTimeout(() => {
                console.log(input1.value);
                timeout = null;//这是隔了500之后再赋值为null，为null就不会清空定时器
            }, 500)
        })

        //防抖封装
        const input2 = document.querySelector("#input2");
        input2.addEventListener("keyup", debounce(function () {
            console.log(input2.value);
        }, 1000))//把函数和时间传过去

        function debounce(fn, delay = 500) {//默认为500毫秒
            let timeout = null;
            return function () {
                if (timeout !== null){
                    clearTimeout(timeout); //清除这个定时器
                    console.log("清空定时器");
                }
                timeout = setTimeout(()=>{
                    fn();
                    timeout = null;
                }, delay);
            }
        }

        //节流
        let jieliu=document.querySelector("#btnJie");
        let timeclaer=null;//要定义在点击事件外面
        jieliu.addEventListener("click",function(){
            if(timeclaer){
                console.log("不鸟你");
                return;//触发了事件，就会有时间，有时间了，我不管你再点击多少次，我都不管你，必须等我这个时间结束之后才看你一眼
            }
            timeclaer=setTimeout(()=>{
                console.log("点击");
                timeclaer=null;//这里需要赋值为null，因为等待事件结束
            },500)
            
        })

    </script>
</body>

</html>